<template>
  <van-form class="page-user-center">
    <van-cell-group inset>
      <van-field name="switch" label="姓名">
        <template #input>{{ formModel.realName }}</template>
      </van-field>

      <van-field name="switch" label="角色">
        <template #input>{{ formModel?.roleNameList?.join(' ， ') }}</template>
      </van-field>

      <van-field name="switch" label="手机号">
        <template #input>{{ formModel?.phone || formModel?.account }}</template>
      </van-field>

      <van-field
        v-if="formModel.userType === 'driver'"
        name="switch"
        label="所属车队"
      >
        <template #input>{{ formModel?.carTeamName?.join(',') }}</template>
      </van-field>

      <van-field name="switch" label="创建时间  ">
        <template #input>{{ formModel?.createTime }}</template>
      </van-field>

      <van-field name="switch" label="邮箱">
        <template #input>{{ formModel?.email }}</template>
      </van-field>

      <van-field name="switch" label="部门">
        <template #input>{{ formModel?.departments?.join(' ， ') }}</template>
      </van-field>
    </van-cell-group>
  </van-form>
  <van-space
    direction="vertical"
    fill
    size="20px"
    style="width: 80%; justify-content: center; margin: 20px auto 0"
  >
    <van-button type="primary" block @click="handleEdit">修改信息</van-button>
    <van-button type="primary" block @click="handleEditPw">修改密码</van-button>
    <van-button plain block @click="handleLogout">退出登录</van-button>
  </van-space>
</template>

<script lang="ts" setup>
  import { ref, toRaw } from 'vue';
  import { useRouter } from 'vue-router';
  import { useUserStore } from '@/store';

  import useUser from '@/hooks/user';
  // import ModalEdit from './components/ModalEdit/index';
  import ModalPw from './components/ModalPw/index';
  import ModalEdit from './components/ModalEdit/index';

  const router = useRouter();
  const userStore = useUserStore();
  const formModel = ref(toRaw(userStore.$state));

  const getDetail = async () => {
    await userStore.getUserInfo();
    formModel.value = toRaw(userStore.$state);
  };

  const handleEditPw = () => {
    ModalPw();
  };

  const { logout } = useUser();
  const handleLogout = () => {
    router.push('home');
    setTimeout(() => {
      logout();
    }, 100);
  };

  const handleEdit = () => {
    ModalEdit({
      account: formModel.value.account,
    }).then(() => {
      getDetail();
    });
  };
</script>

<style scoped lang="less">
  .page-user-center {
    padding: 20px 0;
  }
</style>
